本篇重點

AI Agent 已經可以看畫面、讀 DOM、模擬滑鼠鍵盤，乍看之下網站好像不用為 AI 做任何事。但「做得到」和「做得穩」是兩回事。WebMCP 的核心不是讓 AI 更會看網站，而是讓網站主動提供一組結構化 Tools，告訴 Agent：我能做什麼、需要哪些參數、執行後會得到什麼。

這個系列的目標很單純：不要只讀規格，而是把 WebMCP 做進真實網站，再用同一組任務比較 Browser Agent 和 Tool Calling，看它到底值不值得用。

本系列撰寫時 WebMCP 仍是實驗性技術，規格與 Chrome 實作都可能變動。文章會以 2026 年 9 月的 Chrome 官方文件與 WebMCP Community Group Draft 為基準。

先看一個最普通的任務

假設使用者說：

幫我找 1500 元以下、適合辦公室用的鍵盤。

如果 Agent 完全靠 UI 操作，大致會經過：

1. 找到搜尋框。
2. 輸入「鍵盤」。
3. 找價格篩選器。
4. 判斷最低／最高價格輸入框。
5. 按下搜尋或等待自動更新。
6. 重新閱讀結果卡片。
7. 找出符合條件的商品。

人類會覺得這很自然，因為我們會看版面、理解按鈕位置、忽略裝飾文字；Agent 則要把這些都轉成可執行步驟。

畫面如果只是從：

<button>搜尋</button>

改成：

<button aria-label="開始搜尋">
  <svg>...</svg>
</button>

功能對人沒有改變，但依賴文字、DOM selector 或視覺位置的自動化可能就要重新判斷。

WebMCP 改變的是哪一層？

WebMCP 的做法不是叫 Agent 更努力理解 UI，而是讓網站直接宣告能力：

使用者
  ↓
AI Agent
  ↓
search_products({
  keyword: "鍵盤",
  max_price: 1500
})
  ↓
網站既有搜尋邏輯
  ↓
結構化結果

官方規格把 WebMCP 定義為一組讓 Web Application 提供 JavaScript-based tools 給 AI agents 的 API。網站可以透過 document.modelContext 註冊 Tool，Tool 會有名稱、描述、輸入 Schema 與執行函式。

這個差異很像我們從「叫人去後台按五個按鈕」改成「提供一個 API」。UI 還是存在，但 Agent 不一定需要重演人類每一個點擊步驟。

UI Automation 不好嗎？不是

我不認為 WebMCP 會把 Browser Agent 淘汰。

UI Automation 有幾個很大的優點：

• 網站完全不用配合。
• 舊網站也能操作。
• 沒有 API 的功能仍有機會完成。
• 可以處理跨網站流程。

但它的代價是 Agent 需要推理「怎麼操作」。WebMCP 則把網站願意公開的能力變成較清楚的 Contract。

所以我會把兩者理解成：

這系列的驗證方式

我不想先下結論說「WebMCP 比 Browser Agent 好」，所以驗證包含幾個面向：

• 建立 Search、Navigation、Form、Stateful Tools。
• 測 Tool Name／Description／Schema 對 Agent 選擇的影響。
• 做 Prompt Injection 與權限實驗。
• 把 WebMCP 接到 WordPress REST API。
• 再接 WooCommerce 商品與購物車。
• 用固定 Prompt Dataset 做回歸測試。
• 最後用同一組任務比較 Browser Agent 與 WebMCP。

如果結果沒有比較穩，失敗案例同樣值得記錄。

今天先做一個基準頁

Day 01 先不要碰 WebMCP API，準備一個簡單搜尋頁：

<form id="search-form">
  <label>
    關鍵字
    <input name="keyword" type="search">
  </label>

  <label>
    最高價格
    <input name="max_price" type="number">
  </label>

  <button type="submit">搜尋</button>
</form>

<div id="results"></div>

先記錄一個 Agent 要完成搜尋需要幾個 UI 步驟；替相同功能加入 WebMCP Tool 後，就能比較兩種路徑。

可帶走的重點

1. AI 看得懂網站，不等於能穩定操作網站。
2. WebMCP 的價值在於把網站 Capability 變成 Agent 可理解的 Tool Contract。
3. WebMCP 不是 UI 的替代品，而是多一層 Agent Interface。
4. Browser Automation 和 WebMCP 可以共存，不必二選一。
5. 這系列以實測為主，不只靠概念判斷效果。

參考資料

• Chrome：WebMCP and AI agents
• WebMCP Draft Community Group Report